<template>
  <view class="recommond" v-if="recommonds.length">
    <view v-for="(item, id) in recommonds" :key="id" class="recommond-item">
      <text class="text" :href="item.link">
        <image  class="image" :src="item.image" alt="" />
        <view>{{ item.title }}</view>
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: "HomeRecommond",
  props: {
    recommonds: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    this.$emit("loadDone");
  },
};
</script>
<style lang="scss" scoped>
.recommond {
  display: flex;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
}
.recommond-item {
  flex: 1;
}
.recommond-item .image {
  width: 14r0px;
  height: 14r0px;
  border-radius: 50%;
}
.recommond .text {
  color: rgb(6, 185, 126);
  text-decoration: none;
}
</style>